<style>
  .fs{
    font-size: 16px;
    color: #000;
  }
</style>
<template>
  <div class="main-title">
    <span class="fs">
        当前位置:
    </span>
    <span class="fs" @click="goback">
        首页
    </span>
    <span class="fs" v-for="(item,index) in crumbs">
        <i class="crumbs-icon"></i>
        <span @click="crumbLink(item.link,item.title,index)" :class="{'blue_r' : index == (crumbs.length - 1)}">
            {{item.title}}
        </span>
     </span>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Crumbs',
    data () {
      return {
        centerList: []
      }
    },
    computed: mapState({
      crumbs: state => state.crumbs
    }),
    methods: {
      crumbLink: function (link, title, index) {
        if (link === '') {
          return false
        }
        var crumb = []
        crumb = this.crumbs.slice(0, index + 1)
        this.$store.commit('crumbs', crumb)
        let routeUrl = this.$router.resolve({
          path: link,
          query: {
            cate: title
          }
        })
        window.open(routeUrl.href, '_self')
      },
      goback: function () {
        let routeUrl = this.$router.resolve({
          path: '/'
        })
        window.open(routeUrl.href, '_self')
      }
    },
    created () {
    }
  }
</script>

<style scoped>
  .fs{
    cursor: pointer;
  }
  .blue_r {
    color: #528df5;
  }
</style>
